<template>
  <div id="userTop">
    <div class="left_content">
      <div class="user_main">
        <div class="user_head">
          <input id="inputFile" type="file" accept="image/*" v-show="false">
          <label for="inputFile"><img :src="user_head"></label>
        </div>
        <div class="user_name"><span>{{user_name}}</span></div>
      </div>
      <div class="user_data">
        <div class="sex">
          <span class="text">性别:</span>
          <span class="data">{{sex}}</span>
        </div>
      </div>
    </div>
   
  </div>
</template>

<script>
import {changeHeadImg} from '@/network/profile'
  export default {
    name: "userTop",
    data(){
      return{
        user_name: '暂无昵称',
        user_head: require('assets/img/profile/user/touxiang.png'),
        sex: '未知'
      }
    },
    methods: {
      // 获取本地照片
      async getFile(file) {
        if (!file) {
          return;
        }

        const {
          files
        } = file.target;
        if (files.length <= 0) return;
        const fileReader = new FileReader();
          fileReader.readAsDataURL(files[0]);
          fileReader.onload = async (event) => {
            try {
              const {
                result
              } = event.target;
              this.user_head = result
              const headImg = await changeHeadImg(this.user_head)

            } catch (e) {
            }
        };
      }
    },
    mounted() {
      let user = JSON.parse(localStorage.getItem('user'))
      this.user_name = user.nickName ? user.nickName : '暂无昵称';
      this.user_head = user.avatar;
      this.sex = user.sex;
      document.getElementById("inputFile").addEventListener("change", this.getFile, true)    
    }
  }
</script>

<style scoped>
#userTop{
  width: 90%;
  height: 40%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
  .left_content{
    width: 80%;
    position: relative;
  }
  .user_main{
    display: flex;
    position: absolute;
    top: -18px;
  }
  .user_head{
    width: 80px;
    height: 80px;
    margin: 0px 8px 0px 2px;
    overflow: hidden;
    border-radius: 50%;
    background-color: #fffffb;
  }
  .user_head img{
    width: 100%;
  }
  .user_name{
    display: flex;
    align-items: center;
  }
  .user_name span{
    font-size: 21px;
    font-family: '方正粗黑宋简体', serif;
    color: #f6f6f6;
  }
  .user_data{
    position: absolute;
    bottom: 0px;
    display: flex;
    color: #f6f6f6;
  }
  .user_data div{
    margin-right: 5px;
  }
.user_data .text{
    font-size: 12px;
  }
.user_data .data{
  font-family: "Trebuchet MS";
  font-size: small;
}
  .right_content img{
    width: 80px;
  }
  /* 隐藏选择文件输入框 */
  /* #inputFile {
    display: none;
  } */
</style>
